<template>
	<view >
		<!-- 顶部选项卡 -->
		<scroll-view :scroll-x="isScrollX"  class="tabbar" :scroll-left="scrollLeft">
			<view  :class="['tabbar-ul',isFixed?'fixed':'',isScrollX?'nowrap':'flex',ClassName]" :style="{'background-color':backgroundColor}">
				<view  :class="['li',index==currentIndex?'active':'']" v-for="(item,index) in tabbarArr"  :key="index" :data-current="index" :data-id="item.id"  @tap="clicktab" :style="{'width':itemWidth}">
					<text :style="{'font-size':fSize}" >{{item.name}}</text>
					<text class="dot" v-show="index==currentIndex"></text>
				</view>
			</view>
			<view class="tab-bar-height" v-show="isFixed"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data(){
            return {
              tabs:[],
              currentIndex:0 ,//currentIndex接收父组件传来的activeIndex值；
          }
        },
		props: {
		    /**
		     * tabbar选项卡
		     */
		    tabbarArr:{
				type:Array,
			},
			fontSize:String,
			backgroundColor: {
			    type: String,
			    default: '#FFFFFF'
			},
			ClassName:{
				type:String,
				default:''
			},
			tabIndex:{
				type:[Number,String],
				default:0
			},
			fixed: {
			    type: [Boolean, String],
			    default: true
			},
			scrollX:{
				type:[Boolean, String],
				defalut:false
			},
			itemWidth:{
				type:String,
			}
		},
		computed:{
			fSize() {
			    return `${this.fontSize}px`
			},
			isFixed() {
			    return String(this.fixed) === 'true'
			},
			isScrollX() {
				// console.log(String(this.scrollX) === 'true')
			    return String(this.scrollX) === 'true'
			},
			scrollLeft(){
				return this.tabIndex*this.itemWidth-(this.itemWidth/2)
			}
		},
		methods:{
			clicktab(e){
				let index=e.currentTarget.dataset.current;
				this.currentIndex=index;
				let typeid=e.currentTarget.dataset.id;
				let code=e.currentTarget.dataset.code;
				let obj={
					id:typeid,
					index:index
				}
				
				this.$emit('clickTabitem',obj)
				this.$emit('click-tabitem',obj)
			},
			
		},
		mounted() {
			
		},
		created(){
			this.currentIndex=this.tabIndex
		},
		watch:{
			tabIndex(newValue,oldValue){
				if(newValue!=oldValue){
					this.currentIndex=newValue
				}
			}
		}
		
	}
</script>

<style>
	/* tabbar */
	.fixed{position: fixed;
		top: calc(var(--status-bar-height) + 88upx);
		/* #ifdef MP-WEIXIN */
		top:0;
		/* #endif */
		/*  #ifdef H5  */
		top: 88upx;
		/*  #endif  */
		left: 0;width: 100%;
	}
	.tabbar{overflow: hidden;width: 100%;position: relative;}
	.tabbar-ul{height: 88upx;line-height: 88upx;}
	/* .tab_pro */
	.tabbar-ul.tab_pro .li{margin-right:70upx;position: relative;}
	.tabbar-ul.tab_pro .li:nth-last-of-type(1),.tabbar-ul.tab_pro2 .li:nth-last-of-type(1){margin-right:0;}
	.tabbar-ul.tab_pro .li text,.tabbar-ul.tab_pro2 .li text{height: 100%;box-sizing: border-box;display: block;font-size:32upx;color:#b8becc;font-weight: bold;}
	.tabbar-ul.tab_pro .li.active text,.tabbar-ul.tab_pro2 .li.active text{color: #252d45;font-size: 34upx;font-weight: bold;}
	.tabbar-ul.tab_pro .li.active .dot,.tabbar-ul.tab_pro2 .li.active .dot{
		display:block;
		position:absolute;
		left:50%;
		margin-left:-25upx;
		width:50upx;height:6upx;
		background:#252d45;
		bottom:0;
	}
	/* tab_pro2 */
	.tabbar-ul.tab_pro2{}
	.tabbar-ul.tab_pro2 .li{margin-right:0 ;flex: 1;text-align: center;position: relative;}
	.tabbar-ul.tab_pro2 .li.active text{color:#ff7201 ;}
	.tabbar-ul.tab_pro2 .li.active .dot{background: #ff7201 ;}
	.tab-bar-height{height: 88upx;}
	/* scrolltabbar */
	.nowrap{white-space: nowrap;}
	.nowrap .li{display: inline-block;}
	
</style>
